<script setup lang="ts">
import Childchild from './Childchild.vue'
import { ref } from 'vue'

defineProps<{
  msg: string
}>()
const emit = defineEmits(['changeMsg'])

import { onMounted, onBeforeMount, onBeforeUnmount, onUnmounted } from 'vue'


// 组件挂载前
onBeforeMount(() => {
  console.log('组件挂载前')
})

// 组件挂载后
onMounted(() => {
  console.log('组件挂载完成')
})

// 组件卸载前
onBeforeUnmount(() => {
  console.log('组件即将卸载')
})

// 组件卸载后
onUnmounted(() => {
  console.log('组件已卸载')
})
</script>

<template>
    Child: {{ msg }}
    ChildChild: <Childchild></Childchild>
    <button @click="emit('changeMsg')">子组件触发父组件事件</button>
</template>

<style scoped>

</style>
